<div
  fxLayout="row"
  fxLayout.lt-sm="column-reverse"
  [class.full-height]="isLarge"
>
  <nz-sider
    [nzCollapsible]="isLarge"
    [(nzCollapsed)]="ms.designListCollapsed"
    nzBreakpoint="xl"
    nzCollapsedWidth="50"
    [nzTheme]="ms.sideTheme"
  >
    <ul
      nz-menu
      [nzTheme]="ms.sideTheme"
      nzMode="inline"
      [nzInlineCollapsed]="ms.designListCollapsed"
      (cdkDropListDropped)="drop($event)"
      cdkDropList
    >
      <li nz-menu-item routerLink="/des/add" nzMatchRouter>
        <i nz-icon nzType="plus-circle"></i>
        <span>Add</span>
      </li>
      <li
        nz-menu-item
        nzMatchRouter
        *ngFor="
          let des of ms.game.shipyardManager.shipDesigns;
          trackBy: getDesignId
        "
        cdkDrag
      >
        <a [routerLink]="'edit/' + des.id">
          <!-- <strong *ngIf="!ms.designListCollapsed">{{ des.name }}</strong> -->
          <strong>{{ des.name }}</strong>
        </a>
      </li>
    </ul>
  </nz-sider>
  <div class="inner-content"><router-outlet></router-outlet></div>
</div>
